<template>
  <el-table :data="state.tableData" style="width: 100%">
    <el-table-column label="ID" prop="id" />
    <el-table-column label="名字" prop="name" />
    <el-table-column label="性别" prop="sex" />
    <el-table-column label="地址" prop="addr" />
    <el-table-column label="年龄" prop="age" />
    <el-table-column label="生日" prop="birth" />
    <!-- user/remove -->
    <el-table-column align="right">
      <template #header>
        <el-input v-model="search" size="small" placeholder="Type to search" />
      </template>
      <template #default="scope">
        <el-button size="small" @click="handleEdit(scope.$index, scope.row)"
          >Edit</el-button
        >
        <el-button
          size="small"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)"
          >删除</el-button
        >
      </template>
    </el-table-column>
  </el-table>
  <el-pagination
    background
    @current-change="handleCurrentChange"
    layout="prev, pager, next"
    :total="state.total"
  />
  <my-dialog
    :dialogVisible="dialogVisible"
    :formLabelAlign="formLabelAlign"
    @onClose="handleConfirmSure"
    @onCancel="handleCancel"
  ></my-dialog>
</template>

<script lang="ts">
/**
 * addr: "黑龙江省 黑河市 嫩江县"
age: 49
birth: "2008-11-24"
id: "ccB3BEc4-d676-BFc3-d7AB-cBB0DF9BfDae"
name: "崔艳"
sex: 1
 */
interface User {
  id: string
  name: string
  age: number
  sex: number
  addr: string
  birth: string
}

import { computed, ref, watch, defineComponent, reactive } from 'vue'
import axios from 'axios'

interface StateType {
  tableData: User[]
}
import MyDialog from '@/components/MyDialog.vue'
export default defineComponent({
  components: { MyDialog },
  setup() {
    const state = reactive({
      tableData: [],
      total: 0
    })
    const currentPage = ref(1)
    const search = ref('')
    const pageSize4 = ref(100)
    const dialogVisible = ref(false)
    let formLabelAlign: User = reactive({
      id: '',
      name: '',
      sex: 1,
      addr: '',
      age: 1,
      birth: ''
    })

    // const filterTableData = computed(() =>
    //   // state.tableData.filter(
    //   //   (data) =>
    //   //     !search.value ||
    //   //     data.name.toLowerCase().includes(search.value.toLowerCase())
    //   // )
    // )
    const handleEdit = (index: number, row: User) => {
      console.log(index, row)
      formLabelAlign.name = row.name
      formLabelAlign.id = row.id
      formLabelAlign.addr = row.addr
      formLabelAlign.age = row.age
      formLabelAlign.sex = row.sex
      formLabelAlign.birth = row.birth
      dialogVisible.value = true
    }

    // 确定按钮
    const handleConfirmSure = async () => {
      console.log('formLabelAlign:', formLabelAlign)
      dialogVisible.value = false
      const response = await axios.post(`/api/user/edit`, formLabelAlign)
      console.log('response:', response)
      getTableList(currentPage.value)
    }
    // 取消按钮
    const handleCancel = () => {
      dialogVisible.value = false
    }

    const handleDelete = async (index: number, row: User) => {
      // user/remove
      const response = await axios.get(`/api/user/remove/${row.id}`)
      console.log(index, row, '----')
      console.log(response, 'response')
      getTableList(currentPage.value)
    }

    const getTableList = async (val: number) => {
      const response = await axios.get('/api/user/listpage', {
        params: { page: val }
      })
      console.log('response:', response)
      state.tableData = response.data.users
      state.total = response.data.total
    }
    getTableList(1)

    const handleCurrentChange = (page: number) => {
      currentPage.value = page
      getTableList(page)
    }

    return {
      state,
      formLabelAlign,
      handleConfirmSure,
      dialogVisible,
      handleCancel,
      search,
      handleEdit,
      handleDelete,
      getTableList,
      pageSize4,
      handleCurrentChange
    }
  }
})
</script>
<style>
.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>
